<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: charles
 * @LastEditTime: 2021-07-14 15:18:58
-->
<template>
<!-- 2.创建一个容器 -->
  <div class="item">
    <div class="title">
      <div class="tit" ref="root"></div>
      <div class="text">进驻部门&nbsp;&nbsp;59个</div>
    </div>
    <div class="ti">
      <div class="tle" ref="init"></div>
      <div class="txt">进驻事项&nbsp;&nbsp;1986项</div>
    </div>
  </div>
</template>
<script>
// 引入g2plot
import {Gauge} from'@antv/g2plot'
import {ref, onMounted } from 'vue'
export default {
  setup(){
    // 获取dom元素
    const root = ref(null)
    let  gauge =null
    let initChart = ()=>{
      // 实例化Gauge
        gauge = new Gauge(root.value, {
        percent: 0.75,
        range: {
          ticks: [0,1],
          color: ['l(0) 0:#fabffa 0.5:#b470da 1:#944bcd'],
        },
        indicator: {
          pointer: {
            style: {
              stroke: '#D0D0D0',
              color:"#fff",
              lineHeight:"10px"
            },
          },
          pin: {
            style: {
              stroke: '#D0D0D0',
              color:"#fff",
              lineHeight:"10px"

            },
          },
        },
        statistic: {
          content: {
            style: {
              fontSize: '20px',
              lineHeight: '20px',
              color:"#fff"
            },
          },
        },
      });

gauge.render();

    }

    const init = ref(null)
    let inChart = ()=>{
      // 实例化Gauge
        gauge = new Gauge(init.value, {
        percent: 0.50,
        range: {
          ticks: [0,1],
          color: ['l(0) 0:#fdfa9d 0.5:#e7ca4d 1:#e7ca4d'],
        },
        indicator: {
          pointer: {
            style: {
              stroke: '#D0D0D0',
              color:"#fff",
              lineHeight:"10px"
            },
          },
          pin: {
            style: {
              stroke: '#D0D0D0',
              color:"#fff",
              lineHeight:"10px"

            },
          },
        },
        statistic: {
          content: {
            style: {
              fontSize: '20px',
              lineHeight: '20px',
              color:"#fff"
            },
          },
        },
      });

gauge.render();
    }
    onMounted(initChart)
    onMounted(inChart)
   return{
      root,
      init
   }
 }
}
</script>
<style scoped lang="scss">
   .item{
     width: 428px;
     height: 346px;
     display: flex;
     margin:0 auto;
     .title{
       width: 70px;
       height: 310px;
       flex: 1;
       .tit{
         width:204px;
         height: 110px;
         margin: 0 auto;
         margin-top: 76px;
       }
       .text{
         width:160px ;
         height: 20px;
         margin:0 auto;
         margin-top: 45px;
         text-align: center;
         font-size: 20px;
         color: #fff;
       }
     }
     .ti{
      flex: 1;
      height: 310px;
      .tle{
        width:204px;
         height: 110px;
         margin: 0 auto;
         margin-top: 76px;
      }
       .txt{
          width:160px ;
         height: 20px;
         margin:0 auto;
         margin-top: 45px;
         text-align: center;
         font-size: 17px;
         color: #fff;
       }
     }
   }
</style>
